<template>
<v-col cols="12" id="assist">
  <v-menu
      top
      :offset-x="true"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn block plain x-large color="white darken-4"
         v-bind="attrs"
         v-on="on">
                <!-- <i class="fa fa-envira fa-lg" aria-hidden="true"></i> -->
              <v-icon large>mdi-flask-round-bottom</v-icon>
            </v-btn>
      </template>

      <v-card
        elevation="0"
        outlined
        flat
        class="assist-card"
      >
          <!-- <div>音乐</div> -->
          <div id="pane">
            <v-container>
              <!-- <v-icon>mdi-test</v-icon> -->
              <!-- <div class="text-h4"> -->
              <!-- </div> -->
              <div class="text-h6">
                <v-icon>mdi-book-education</v-icon>
                <span> roynote</span>
              </div>
              <br/>
              <p>
                roynote 的目标是成为一款集成任务编排、个人笔记的软件。
              </p>
              <br />
              <div class="text-h6">
                <v-icon>mdi-ufo-outline</v-icon>
                <span> 特质</span>
              </div>
              <br />
              <p>
                基于公认的原则而设计，并拓展出工具箱，更好的完成目标。
              </p>
            </v-container>
          </div>
      </v-card>
    </v-menu>
</v-col>
</template>

<script>
export default {
}
</script>

<style scoped>
  #assist {
    align-self: flex-end;
    /* margin-bottom: -12px; */
  }
  #pane {
    width: 300px;
    height: 300px;
  }
  .assist-card {
      opacity: .8;
  }
  .v-btn:not(.v-btn--round).v-size--x-large,
  .v-btn:not(.v-btn--round).v-size--default{
    padding:28px 0;
  }
</style>